<script setup>
import { ref, reactive, onMounted } from 'vue';
import { roleListApi, roleInfoApi, saveRoleApi, updateRoleApi, deleteRoleApi } from'@/apis/system/role.js' 
import { menuTreeApi } from'@/apis/system/menu.js'
import { Search, Delete, EditPen, Plus, Refresh } from '@element-plus/icons-vue'


// 参数
const params = reactive({
    roleName:'',
    status:'',
    page:1,
    pageSize:10,
})

// 获取数据
const loading = ref(false)
const roles = ref({})
const roleList = async () => {
    loading.value = true
    const res = await roleListApi(params)
    roles.value = res.data
    loading.value = false
}

// 获取树结构数据
const menus = ref([])
const props = {
    multiple: true,
    value:'id',
    label:'name',
}
const menuTree = async() => {
    const res = await menuTreeApi()
    menus.value = res.data
}

// 搜索
const handleSearch=()=>{
    roleList();
}

// 重置
const handleRefresh=()=>{
    params.roleName = '';
    params.status = '';
    params.page =1,
    params.pageSize =10,
    roleList();
}

// 添加角色
const form = ref({})
const dialogFormVisible = ref(false)
let title = '添加角色' 
const handleAddOrUpdate = async(id)=>{
    if(id === null){
        // 添加
        form.value = {}
        form.value.status = 0
        dialogFormVisible.value = true;
        title = '添加角色'
    }else {
        // 获取信息
        const res = await roleInfoApi(id)
        form.value = res.data
        dialogFormVisible.value = true;
        title = '修改角色'
    }
}


const saveOrUpdate = () => {
    let arr = []
    form.value.permissionId.forEach(element => {
        arr = arr.concat(element)
    });
    form.value.permissionId = [...new Set(arr)];
    if(form.value.id){
        // 修改
        updateRoleApi(form.value).then(res => {
            if(res.code === 0){
                ElMessage({
                message: '修改成功',
                type: 'success',
            })
            dialogFormVisible.value = false
            roleList()
            }
        })
    }else{
        saveRoleApi(form.value).then(res => {
            if(res.code === 0){
                ElMessage({
                message: '添加成功',
                type: 'success',
            })
            dialogFormVisible.value = false
            roleList()
            }
        })
    }
}


const disabled = ref(false)
const background = ref(false)

const handleSizeChange = (val) => {
    params.pageSize = val;
    params.page = 1;
    roleList()
}
const handleCurrentChange = (val) => {
    params.page = val;
    roleList()
}

// 删除
const handleRemove = (id) => {
  ElMessageBox.confirm(
    '你确定要删除此条数据吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    deleteRoleApi([id]).then(res => {
      if(res.code === 0){
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        roleList();
      }
    })
  })
  .catch(() => {
    ElMessage({
      type: 'info',
       message: '操作取消',
    })
  })
}

onMounted(()=>{
        roleList()
        menuTree()
    }
)
</script>

<template>
    <div class="container" v-loading="loading">
        <el-row>
            <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;"> 
                    <span style="display: inline-block;width: 70px;">角色名称</span>
                    <el-input v-model="params.roleName" placeholder="请输入角色名称" clearable style="width: 280px;"/>
                    <span style="display: inline-block;width: 70px;margin-left: 10px;">角色状态</span>
                    <el-select v-model="params.status" clearable placeholder="请选择角色状态" style="width: 280px;">
                        <el-option :key="0" label="启用" :value="0"/>
                        <el-option :key="1" label="禁用" :value="1"/>
                    </el-select>
                    <el-button type="primary" :icon="Search" style="margin-left: 10px;" @click="handleSearch">搜索</el-button>
                    <el-button @click="handleRefresh" :icon="Refresh">重置</el-button>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
                <el-button type="primary" plain @click="handleAddOrUpdate(null)">添加角色</el-button>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <el-table :data="roles.list" style="width: 100%">
                    <el-table-column prop="roleName" label="角色名"/>
                    <el-table-column prop="remark" label="备注" align="center"/>
                    <el-table-column prop="status" label="角色状态" width="120" align="center">
                        <template v-slot="scoped">
                            <el-tag v-if="scoped.row.status === 0" type="primary">启用</el-tag>
                            <el-tag v-if="scoped.row.status === 1" type="danger">禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" align="center"/>
                    <el-table-column label="操作" width="220" align="center">
                        <template v-slot="scoped">
                            <el-button type="primary" text size="small" @click="handleAddOrUpdate(scoped.row.id)">修改</el-button>
                            <el-button type="primary" text size="small" @click="handleRemove(scoped.row.id)">删除</el-button>
                            <!-- <el-button type="primary" text size="small" :icon="Switch" @click="hadnleAllocation(scoped.row.id)">分配权限</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <div class="pageination">
            <el-pagination
                v-model:current-page="roles.page"
                v-model:page-size="roles.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="roles.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>

        <el-dialog v-model="dialogFormVisible" :title="title" style="width: 35%;">
            <el-form :model="form" label-width="100px">
            <el-form-item label="角色名称">
                <el-input v-model="form.roleName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="状态">
                <el-switch v-model="form.status"
                :active-value="0"
                :inactive-value="1"
                />
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.remark" autocomplete="off" type="textarea"/>
            </el-form-item>
            <el-form-item label="权限">
                <el-cascader
                    v-model="form.permissionId"
                    :options="menus"
                    :props="props"
                    collapse-tags
                    collapse-tags-tooltip
                    clearable
                    style="width: 100%;"
                    :max-collapse-tags="2"
                />
            </el-form-item>
            </el-form>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="saveOrUpdate">保存</el-button>
            </div>
            </template>
        </el-dialog>
    </div>

</template>

<style scoped lang='scss'>

</style>